import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {increment, decrement} from '../action/counter';

function FavoritePage({navigation, route}) {
  const dispatch = useDispatch();
  const num = useSelector(state => {
    return state.counter.num;
  });
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>num: {num}</Text>
      <Button
        title="增加"
        onPress={() => {
          dispatch(increment(1));
        }}
      />
      <Button
        title="减少"
        onPress={() => {
          dispatch(decrement(1));
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    backgroundColor: '#F5FcFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default FavoritePage;
